import React, { Component } from 'react';
import "../assets/css/login.css";
import { Form, Icon, Input, Button,message} from 'antd';
import {Login} from "../assets/js/api.js";
import {userLogin} from "../store/actionCreators.js"

import { withRouter } from 'react-router-dom';

import { connect } from 'react-redux'


const FormItem = Form.Item;



class NormalLoginForm extends Component {

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {

          if (!err) {
             console.log(values)
             var data = {
              username: values.userName,
              password:values.password
             }

             Login(data).then(res=>{
               console.log(res)

              if (res.data.code == 200 && res.data.ifsuccess) {

                const action = {
                  type:'login',
                  value:values.userName
                }


                this.props.changeLoginName(action)
                this.props.history.push('/parKingManage')

              } else {
                 message.error(res.data.msg);
              }

             },err=>{
              console.log(err)

             })
          }
        });
      }


  render() {
    const { getFieldDecorator } = this.props.form;
    return (

        <div className="img_box">
             <img className="logo"  src={require('../assets/img/logo.svg')}  alt=""/>

              <div  className="loginBox" >

       <div  className="login">
           <div  className="tip" >
              芯球APP后台登录
           </div>


         <div className="login_form">


        <Form onSubmit={this.handleSubmit} className="login-form">
         <FormItem>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: '请输入登录名' }],
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="登录名" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: '请输入登录密码' }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
          )}
        </FormItem>


        {/* <FormItem> */}
         <Button type="primary" htmlType="submit" className="login-form-button">
            登录
          </Button>

        {/* </FormItem> */}


      </Form>
         </div>
       </div>

      </div>

        </div>



    );
  }
}



const mapState = (state) => ({
	loginName: state.loginName,
});

const mapDispatch = (dispatch) => ({

    changeLoginName(action){

      dispatch(action)

    }

});


const login = Form.create()(NormalLoginForm);

export default connect(mapState, mapDispatch)(withRouter(login));

